<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <template id="app-template">
      <f7-app>
        <f7-view main>
          <f7-page ptr @ptr:refresh="loadMore">
            <f7-navbar title="Pull To Refresh"></f7-navbar>
            <f7-list media-list>
              <f7-list-item
                v-for="(item, index) in items"
                :key="index"
                :title="item.title"
                :subtitle="item.author">
                <img slot="media" :src="item.cover" width="44" />
              </f7-list-item>
      
              <f7-block-footer>
                <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native scrolling so it may not work on desktop browser.</p>
              </f7-block-footer>
            </f7-list>
          </f7-page>
        </f7-view>
      </f7-app>
      
    </template>
    <script>
      var component = {
        data() {
          return {
            items: [
              {
                title: 'Yellow Submarine',
                author: 'Beatles',
                cover: 'http://lorempixel.com/88/88/abstract/1',
              },
              {
                title: 'Don\'t Stop Me Now',
                author: 'Queen',
                cover: 'http://lorempixel.com/88/88/abstract/2',
              },
              {
                title: 'Billie Jean',
                author: 'Michael Jackson',
                cover: 'http://lorempixel.com/88/88/abstract/3',
              },
            ],
            songs: ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'],
            authors: ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'],
          };
        },
        methods: {
          loadMore(event, done) {
            const self = this;
      
            setTimeout(() => {
              const picURL = `http://lorempixel.com/88/88/abstract/${Math.round(Math.random() * 10)}`;
              const song = self.songs[Math.floor(Math.random() * self.songs.length)];
              const author = self.authors[Math.floor(Math.random() * self.authors.length)];
      
              self.items.push({
                title: song,
                author,
                img: picURL,
              });
      
              done();
            }, 1000);
          },
        },
      }
    </script>
    <script src="../../packages/vue/vue.min.js"></script>
    <script src="../../packages/vue/framework7-vue.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7Vue, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7Vue, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      if (typeof component === 'undefined') {
        var component = {};
      }
      if (typeof routes === 'undefined') {
        var routes = [];
      }
      component.el = '#app';
      component.template = '#app-template';
      
      new Vue(component);
    </script>
  </body>
</html>